<template>
  <view class="container">
    <uv-sticky bgColor="#fff">
      <uv-tabs :list="tabsList" :current="tabsCurrent" :lineWidth="58" :inactiveStyle="{color: '#666'}"
        :activeStyle="{color: '#333'}" :scrollable="false" @click="tabsHandler"></uv-tabs>
    </uv-sticky>
    <view class="main">
      <view class="main_box" v-for="(item,index) in list" :key="index">
        <view class="main_box_left">
          <image :src="item.image" mode=""></image>
          <view>
            <image
              :src="item.type == 1? '/static/image/tup.png': item.type=== 2? '/static/image/yingyue.png':'/static/image/shiping.png'"
              mode=""></image>
            <text>{{item.type == 1? '图文': item.type == 2? '音频': '视频'}}</text>
          </view>
        </view>
        <view class="main_box_content">
          <view class="main_box_content_head ellipsis">
            {{item.title}}
          </view>
          <view class="main_box_content_footer">
            <text>{{`已更新${item.episodes || 1}期`}}</text>
            <button v-if="tabsCurrent !== 2"
              :class="tabsCurrent == 1? 'footer_none': ''">{{tabsCurrent == 0? '送好友' :'赠送中'}}</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';
  const tabsList = ref([
    {
      name: '未赠出',
    }, {
      name: '赠送中',
    }, {
      name: '已赠出'
    },
  ])
  const tabsCurrent = ref(0)
  const tabsHandler = (item : any) => {
    console.log(item)
    tabsCurrent.value = item.index
  }
  const list = ref([])
  const data = [
    {
      image: '/static/taotaitupian/wangyesheji.png',
      type: 1,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/xianshangzhaoping.png',
      type: 2,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    }, {
      image: '/static/taotaitupian/jiaoshijie.png',
      type: 3,
      title: '还在为教资高语笔试发愁？',
      des: '此处为课程描述，很多很多很多很多很...',
      read: 560,
      o_price: 999,
      episodes: 9,
      price: 666,
    },
  ]
  const getList = () => {
    list.value.push(...data)
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  }
  const params = reactive({
    pageIndex: 1,
    pageSize: 20
  })
  onReachBottom(() => {
    params.pageIndex++
    getList()
  })
  onPullDownRefresh(() => {
    params.pageIndex = 1
    list.value = []
    getList()
  })
  onLoad(() => {
    list.value.push(...data)
  })
</script>

<style lang="less" scoped>
  .container {
    box-sizing: border-box;
    :deep(.uv-tabs__wrapper__nav__line) {
      background: #228CFE !important;
      font-size: 28rpx !important;
    }

    .main {
      padding: 30rpx;
      box-sizing: border-box;

      &_box {
        border-bottom: 1px solid rgba(#000, .1);
        padding-bottom: 40rpx;
        margin-bottom: 40rpx;
        display: flex;
        justify-content: space-between;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;

        &:last-child {
          border-bottom: 0;
          padding-bottom: 0;
          margin-bottom: 0;
        }

        &_left {
          position: relative;
          margin-right: 20rpx;
          border-radius: 8rpx;
          width: 240rpx;
          height: 160rpx;

          image {
            width: 240rpx;
            height: 160rpx;
            border-radius: 8rpx;
          }

          >view {
            position: absolute;
            bottom: 0;
            left: 0;
            background: #343434;
            border-radius: 0rpx 10rpx 0rpx 10rpx;
            opacity: 0.6;
            color: #fff;
            font-size: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90rpx;
            height: 36rpx;

            image {
              width: 32rpx;
              height: 32rpx;
              margin-right: 2rpx;
            }
          }
        }

        &_content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          flex: 1;

          &_head {
            font-weight: bold;
            font-size: 30rpx;
            color: #333333;

            text {
              font-size: 24rpx;
              color: #666666;
              margin-top: 18rpx;
            }
          }

          &_footer {
            font-size: 24rpx;
            color: #333333;
            margin-bottom: 8rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 47rpx;

            button {
              display: flex;
              margin: 0;
              padding: 0;
              align-items: center;
              justify-content: center;
              width: 133rpx;
              height: 47rpx;
              background: linear-gradient(138deg, #FF973A 0%, #FF6A3C 100%);
              border-radius: 24rpx;
              font-weight: 500;
              font-size: 24rpx;
              color: #FFFFFF;
            }

            .footer_none {
              background: #BABABA;
            }
          }
        }
      }
    }
  }
</style>